import React,{PureComponent} from 'react'
//使用connect连接组件和store
import { connect } from 'react-redux'
import{ Link } from 'react-router-dom'
import { actionCreators } from './store'
import { actionCreators as loginActionCreators } from '../../pages/login/store'
import { HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    NavSearchBox,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList
} from './style'
//无状态组件


class Header extends PureComponent{
    
    getListArea(){
        const {focused,mouseIn,list,totalPage,page,handleChangePage,handleMouseEnter,handleMouseLeave} = this.props
        const newList = list.toJS()
        const pageList = []
        if(newList.length){
            for (let i=(page-1)*10;i<page*10;i++){
                if(newList[i]){
                    pageList.push(<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>)
                }
                
            }
        } 

        if(focused || mouseIn){
            return (
                <SearchInfo 
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}>
                    <SearchInfoTitle>
                        热门搜索
                    </SearchInfoTitle>
                    <SearchInfoSwitch
                    onClick={()=>handleChangePage(page,totalPage,this.spinIcon)}
                    >
                    <span 
                    ref={(icon)=>{this.spinIcon=icon}}
                    className='iconfont spin'>&#xe851;</span>
                    换一批</SearchInfoSwitch>
                    <SearchInfoList>
                        {
                           pageList
                        }                        
                    </SearchInfoList>
                </SearchInfo>
            )
        }else{
            return null
        }
    }
    render(){
        const {focused,list,handleSearchFocus,handlesearchBlur ,login,logout} = this.props
        return (
        <HeaderWrapper>
            <Link to='/'> 
                <Logo/>
            </Link>   
            <Nav>
                <NavItem className='left active'>首页</NavItem>
                <NavItem className='left'>下载app</NavItem>
                <NavSearchBox className={focused?'focused':''}>
                    <NavSearch 
                    onFocus={()=>handleSearchFocus(list)}
                    onBlur={handlesearchBlur}
                    >
                    </NavSearch>
                    <span 
                    className={focused?'icon-focused icon-search iconfont':'icon-search iconfont'}>&#xe60b;
                    </span>
                    {this.getListArea()}
                </NavSearchBox>
                {
                    login?<NavItem onClick={logout} className='right'>退出</NavItem>:
                    <div>
                        <Link to='/login'>
                            <NavItem className='right'>登录</NavItem>
                        </Link>
                    </div> 
                }
                
                <NavItem className='right'><span className='iconfont iocn-A'>&#xe636;</span></NavItem>
            </Nav>
            <Addition>
                <Button className='reg'>注册</Button>
                <Link to='/write'>
                    <Button className='writting'>
                    <span className='iconfont icon-writting'>&#xeee0;</span>
                    写文章
                    </Button>
                </Link>
            </Addition>
        </HeaderWrapper>
        )
    }
}

const mapStateToProps=(state)=>{
    return {
        focused:state.getIn(['header','focused']),
        list:state.getIn(['header','list']),
        page:state.getIn(['header','page']),
        mouseIn:state.getIn(['header','mouseIn']),
        totalPage:state.getIn(['header','totalPage']),
        login:state.getIn(['login','login'])
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        handleSearchFocus(list){
            (list.size===0) && dispatch(actionCreators.getList())
            dispatch(actionCreators.searchFocus())
        },
        handlesearchBlur(){
            dispatch(actionCreators.searchBlur())
        },
        handleMouseEnter(){
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave(){
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page,totalPage,spin){
            let originAngle=spin.style.transform.replace(/[^0-9]/ig,'')
            if(originAngle){
                originAngle = parseInt(originAngle,10)
            }else{
                originAngle = 0
            }
            
            spin.style.transform='rotate('+(originAngle+360)+'deg)'
            console.log(spin.style.transform)
            if(page<totalPage){
                dispatch(actionCreators.changePage(page+1))
            }else{
                dispatch(actionCreators.changePage(1))
            }
        },
        logout(){
            dispatch(loginActionCreators.logout())
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header);
//connect(mapStateToProps:store映射props,mapDispatchToProps:映射)(接收组件)